<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>login_Page</title>
        <!--表单样式和网页样式-->
        <style>
        input[type=text]{
        width: 300px;
  		padding: 12px 20px;
  		margin: 5px 0;
  		display: inline-block;
  		border: 1px solid #ccc;
  		border-radius: 4px;
  		box-sizing: border-box;
        }
        
        .button2
        {
        width: 200px;
  		background-color: #191970;
  		color: white;
  		padding: 14px 20px;
  		margin: 5px 0;
  		border: none;
  		border-radius: 4px;
  		cursor: pointer;
        }
        
        input[type=password]{
        width: 300px;
  		padding: 12px 20px;
  		margin: 5px 0;
 		display: inline-block;
  		border: 1px solid #ccc;
  		border-radius: 4px;
  		box-sizing: border-box;
        }
        
        .select{
        width: 150px;
  		padding: 12px 20px;
  		margin: 5px 0;
  		display: inline-block;
  		border: 1px solid #ccc;
  		border-radius: 4px;
  		box-sizing: border-box;
        }
        
        .div_1 {
        float:right;
  		border:2px solid #a1a1a1;
  		background-color: #f2f2f2;
  		border-radius:25px;
  		padding:30px 20px;
  		margin:20px;
  		width:300px;	
		}
		
	 	.block{
	 	float:button;
        text-align:center;
		margin: 5px;
		padding: 15px;
		border: 3px solid black;
		color:black;
        }
        
        .foot{
		position:fixed;
		bottom:5px;
        text-align:center;
        padding: 10px;
        border-radius:6px;
        background-image: linear-gradient(to bottom right,#ffb21a,#ffdd99);
        }
        
        </style>
       
        <script src="jquery-3.5.1.js"></script>
        <script src="jquery.cookie.js"></script>
        <script>
        function Login(){
        	
        	if ($("#remberMe").attr("checked")) {  
                var str_username = $("#userid").val();  
                $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie  
                $.cookie("username", str_username, { expires: 7 });   
            }  
            else {  
                $.cookie("rmbUser", "false", { expire: -1 });  
                $.cookie("username", "", { expires: -1 });   
            } 
        	var userid = $("#userid").val();
        	
        	sessionStorage.setItem('testKey',userid);
        	var data = $("#form1").serialize();//表单序列化
        	console.log(data);
        	$.post("login",data,function(data){
        		if(data=="admin"){
        			window.location = "Admin/AdminPage.html?aid="+ userid;
        		}else if(data=="student"){
        			window.location = "Student/StudentPage.html?sid="+userid;
        		}else if(data=="teacher"){
        			window.location = "Teacher/TeacherPage.html?tid="+userid;
        		}else{
            		$("#alter").html("登录错误");
            	}
        	})
        }
        function reset(){
        	document.getElementById("userid").value = "";
        	document.getElementById("password").value = "";
        }
    </script>
        <script>
        //一个小测试
        $(document).ready(function(){
        	$("#change").click(function(){
        		$("h2").fadeToggle("slow");
        	});
        });
        
        
        //cookie
     	$(document).ready(function () {  
            if ($.cookie("rmbUser") == "true") {  
            $("#remberMe").attr("checked", true);  
            $("#userid").val($.cookie("username"));  
            }  
        });  
     	//记住用户名密码  
     
        //输入为空提示
        function validateForm(){
        	var a = document.forms["login"]["userid"].value; 
        	var b = document.forms["login"]["pwd"].value;
        	if(a==null||a==""||b==null||b=="")
        		{
        		document.getElementById("alter").innerHTML="*未填写账号或密码*"
        			return false;
        		}
        }
        </script>
    </head>
    <body bgcolor="#FFEBCD">
    <!-- 头部块-无用 -->
    <div class="block" id="header" style="background-color:#FFE4C4;">
       <h2> <a href="http://i-hit-edu-cn.ivpn.hit.edu.cn:1080/index#/app/home/index" target="_blank"
       style="color:black;"> <em>This is an Academic System.</em></a></h2>
        <button id="change">hide/show title</button>
    </div>
    
    <br/>
    <!-- 内容块-登录表单 -->
    <div class="div_1" id="content">
       <form id="form1">
            <b>用户</b>：<br/>
            <input type="text" name="id" id="userid">
            <br/>
            <b> 密码</b>：<br/>
            <input type="password" name="pwd" id="password">
         	<br/>
            <b> 选择登录身份</b>：<br/>
            <select name="identity" id="identity" class="select">
            <option value="student" selected>学生</option>
            <option value="teacher">教师</option>
            <option value="admin">管理员</option>
            </select>
            
            
             <br/>
            <input id="remberMe" type="checkbox" name="remberMe">
            <span>记住我</span>
            <br/>
            
            <button type="button" onclick="Login()" class="button2">确认登录</button>
           <em id="alter" style="color:red"></em>
            </form>
        
   </div>

   <!-- 底部块 -->
   <div id="footer" class="foot" >
   <em style="color:white">[made by group four]</em></div>
  
   
  
   
   </body>
</html>